@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.pattern-gallery {
	display: grid;
	gap: 48px;

	.pattern-gallery__pagination-button-wrapper {
		display: flex;
		justify-content: center;
	}

	.pattern-gallery__pagination-button {
		border-color: currentColor;
		color: #3858e9;

		&:enabled:hover,
		&:focus {
			border-color: currentColor;
			color: #1d35b4;
		}
	}
}

.pattern-gallery--grid {
	gap: 16px 24px;

	@include break-medium {
		grid-template-columns: repeat(2, 1fr);
	}

	@include break-huge {
		grid-template-columns: repeat(3, 1fr);
	}

	.pattern-gallery__pagination-button-wrapper {
		grid-column: 1 / -1;
		padding-top: 40px;
	}
}

.pattern-gallery--grid.pattern-gallery--pages {
	align-items: start;
}
